<template>
    <div class="">
        <v-title title="我的佣金">
            <p class="date">查询时间:{{$utils.toTimeFormat(date,'yyyy年MM月dd日 hh时mm分ss秒')}}
                <i class="iconfont icon-shuaxin" @click="refresh"></i>
            </p>
        </v-title>
        <div class="dfr">
            <v-private-item label="累计佣金" :value="wallet.totalAmount"/>
            <v-private-item label="当月佣金" :value="wallet.monthAmount"/>
            <v-private-item label="可提现佣金" :value="wallet.freeBalance"/>
        </div>
    </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from '../home-title'
  import vPrivateItem from '../private-item'

  @Component({
    components: {
      vTitle, vPrivateItem
    }
  })
  export default class Store extends Vue {
    @Prop({
      default: () => {}
    }) wallet
    date = +new Date()

    refresh () {
      this.$emit('refresh')
      this.date = +new Date()
    }
  }
</script>

<style lang="less" scoped>
    .title {
        font-size: 20px;
        color: #666;
        margin: 20px auto 40px;
        padding-left: 20px;
    }

    .date {
        color: #999;
        font-size: 14px;
    }

    .dfr {
        width: 80%;
        margin: 0 auto;
    }
    .iconfont {
        cursor: pointer;
    }
</style>
